<template>
  <Modal v-model="closePrize" class-name="vertical-center-modal" width="650" :mask-closable="false" :closable="false">
    <div slot="header"></div>
    <div class="prize-sty">
      <Icon type="ios-close-circle-outline" size="26" color="#FFFFFF" class="close" @click="closePrize = false" />
      <!-- 免运费-大奖 -->
      <img src="../images/big_prize.png" v-if="popType == 'prizePop'" class="img-sty" alt="">
      <div class="claim-btn-area" v-if="popType == 'prizePop'" @click="clickMet()"></div>

      <!-- 70金币 -->
      <img src="../images/coin_prize.png" v-if="popType == 'coinPop'" class="img-sty" alt="">
      <div class="coin-btn-area" v-if="popType == 'coinPop'" @click="clickMet()"></div>

      <!-- 支付成功-免运费活动 -->
      <img src="../images/success_payment.png" v-if="popType == 'resultPop'" class="img-sty" alt="">
      <div class="payment-btn-area" v-if="popType == 'resultPop'" @click="partBtn()"></div>
      <div class="btn" v-if="popType == 'resultPop'">
        <div class="look-parcel" @click="lookParcel()">{{ $t('activity.view_parcel') }}</div>
      </div>

    </div>
    <div slot="footer"></div>
  </Modal>
</template>

<script>
import { lotteryClick } from "@/api/expressOrder";
export default {
  props: {
    activityId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      closePrize: false,
      popType: ''
    }
  },
  methods: {
    open(type) {
      this.popType = type;
      this.closePrize = true;
    },
    // 查看包裹
    lookParcel() {
      this.closePrize = false;
      setTimeout(() => {
        this.$router.push('/user/shipment');
      }, 1000)
    },
    // 领取关闭大奖弹窗，7日后手动发放
    clickMet() {
      this.closePrize = false;
    },
    partBtn() {
      this.closePrize = false;
      lotteryClick({ activityId: this.activityId, operateType: 2 });
      this.$router.push(`/free-shipping?acId=${this.activityId}`);
    }
  }
}
</script>

<style scoped lang="less">
:deep(.ivu-modal-content) {
  box-shadow: none;
  background: transparent;

  .ivu-modal-header {
    border: none;
    padding: 0;
  }

  .ivu-modal-body {
    padding: 0;
  }

  .ivu-modal-footer {
    padding: 0;
    border: none;
  }
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .prize-sty {
    width: 650px;
    height: 728px;
    margin: 0 auto;
    position: relative;

    .img-sty {
      width: 650px;
      height: 728px;
    }

    .claim-btn-area {
      width: 228px;
      height: 74px;
      border-radius: 50px;
      position: absolute;
      left: 214px;
      bottom: 104px;
      cursor: pointer;
    }

    .coin-btn-area {
      width: 352px;
      height: 76px;
      border-radius: 50px;
      position: absolute;
      left: 160px;
      bottom: 160px;
      cursor: pointer;
    }

    .payment-btn-area {
      width: 352px;
      height: 76px;
      border-radius: 50px;
      position: absolute;
      left: 150px;
      bottom: 160px;
      cursor: pointer;
    }

    .close {
      position: absolute;
      top: 50px;
      right: 64px;
      z-index: 2;
      cursor: pointer;
    }

    .btn {
      position: relative;
      bottom: 90px;
      display: flex;

      .look-parcel {
        font-weight: 400;
        font-size: 25px;
        color: #FFFFFF;
        line-height: 30px;
        border-bottom: 1px solid #FFFFFF;
        cursor: pointer;
        margin: 0 auto;
      }
    }
  }
}
</style>